<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '0px',
    }"
  >
    <div class="wrap-other-roll">
      <!-- 热门专家 -->
      <div class="card">
        <div class="title">热门专家</div>
        <el-form
          :inline="true"
          :model="form.topExpert"
          class="demo-form-inline more"
        >
          <el-form-item label="更多跳转地址" required>
            <el-input
              v-model="form.topExpert.more"
              maxlength="100"
              clearable
              style="width: 610px"
              placeholder="请输入更多跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="获取数据个数" required>
            <el-input-number
              v-model="form.topExpert.count"
              controls-position="right"
              :min="1"
              :max="6"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <!-- 专家问答 -->
      <div class="card">
        <div class="title">专家问答</div>
        <el-form
          :inline="true"
          :model="form.answerExpert"
          class="demo-form-inline more"
        >
          <el-form-item label="更多跳转地址" required>
            <el-input
              v-model="form.answerExpert.more"
              maxlength="100"
              clearable
              style="width: 610px"
              placeholder="请输入更多跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="获取数据个数" required>
            <el-input-number
              v-model="form.answerExpert.count"
              controls-position="right"
              :min="1"
              :max="3"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <!-- 知识推荐 -->
      <div class="card">
        <div class="title">知识推荐</div>
        <el-form
          :inline="true"
          :model="form.knowledge"
          class="demo-form-inline more"
        >
          <el-form-item label="更多跳转地址" required>
            <el-input
              v-model="form.knowledge.more"
              maxlength="100"
              clearable
              style="width: 610px"
              placeholder="请输入更多跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="获取数据个数" required>
            <el-input-number
              v-model="form.knowledge.count"
              controls-position="right"
              :min="1"
              :max="4"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <!-- 农科讲堂 -->
      <div class="card">
        <div class="title">农科讲堂</div>
        <el-form
          :inline="true"
          :model="form.live"
          class="demo-form-inline more"
        >
          <el-form-item label="更多跳转地址" required>
            <el-input
              v-model="form.live.more"
              maxlength="100"
              style="width: 610px"
              placeholder="请输入更多跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="获取数据个数" required>
            <el-input-number
              v-model="form.live.count"
              controls-position="right"
              :min="1"
              :max="6"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center; padding-bottom: 20px">
        <span
          class="wrap-btn wrap-success"
          v-if="$checkPermission(101)"
          @click="save"
          >保存</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        topExpert: {},
        answerExpert: {},
        knowledge: {},
        live: {},
      },
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取详情
      this.$axios.get('/admin/portal/school/get').then((data) => {
        this.form = {
          topExpert: {},
          answerExpert: {},
          knowledge: {},
          live: {},
        }
        if (data.code == 200) {
          if (data.data) {
            this.form = data.data
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    save() {
      //保存
      if (!this.form.topExpert.more) {
        this.$message.error('请输入热门专家更多跳转地址')
        return
      }
      if (!this.form.topExpert.count) {
        this.$message.error('请输入热门专家获取数据个数')
        return
      }
      if (!this.form.answerExpert.more) {
        this.$message.error('请输入专家问答更多跳转地址')
        return
      }
      if (!this.form.answerExpert.count) {
        this.$message.error('请输入专家问答获取数据个数')
        return
      }
      if (!this.form.knowledge.more) {
        this.$message.error('请输入知识推荐更多跳转地址')
        return
      }
      if (!this.form.knowledge.count) {
        this.$message.error('请输入知识推荐获取数据个数')
        return
      }
      if (!this.form.live.more) {
        this.$message.error('请输入农科讲堂更多跳转地址')
        return
      }
      if (!this.form.live.count) {
        this.$message.error('请输入农科讲堂获取数据个数')
        return
      }
      this.$axios.post('/admin/portal/school/edit', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.itemList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
  }

  .el-card {
    margin-top: 20px;
  }
  .more {
    margin-top: 20px;
  }
}
</style>
